<script lang="ts" setup>
import { ref } from 'vue'
import { reactive } from 'vue'
import type { PriceRangeValueType, GoodsSortOptionsItem } from '@/types/list'
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import type { GoodsItemType } from '@/types/goods'
import { getPosterListAPI } from '@/api/home'
import { onMounted } from 'vue'
import { getGoodsListAPI2 } from '@/api/goods'

const baseURL = import.meta.env.VITE_BASE_URL

const isTagsShow = reactive({
  inventory: false,
  serve: false,
  price: false
})

const isTagsActive = reactive({
  inventory: false,
  serve: false,
  price: false
})

// 价格区间
const priceRangeValue: PriceRangeValueType = [0, 300]
const priceCurrentMinValue = ref(0)
const priceCurrentMaxValue = ref(300)

const handleChangePriceRange = (valueArr: PriceRangeValueType) => {
  if (Array.isArray(valueArr)) {
    const [min, max] = valueArr
    priceCurrentMinValue.value = min
    priceCurrentMaxValue.value = max
    productList.value = defaultList.value.filter((item: any) => item.price >= min && item.price <= max)
    // console.log(min, max)
  }
}

// 面包屑
const routes = reactive([
  {
    path: '/',
    label: '首页'
  }
])

const route = useRoute()
const params = reactive(route.params as { id: string })
const QUERY_MAP: Record<string, string> = reactive({
  '0': '全部结果',
  '1': '无暇底妆',
  '2': '国风彩妆',
  '3': '实力锁妆',
  '4': '温和净卸',
  '5': '匠心妆具'
})

routes.push({
  path: route.fullPath,
  label: QUERY_MAP[params.id]
})

const IMG_MAP: Record<string, string> = {
  '0': '/uploads/home_banner1.png',
  '1': '/uploads/3.png',
  '2': '/uploads/4.png',
  '3': '/uploads/home_banner4.png',
  '4': '/uploads/home_banner5.png',
  '5': '/uploads/home_banner6.png'
}
let imgUrl = IMG_MAP[params.id]

const goodsSortValue = ref(0)
const goodsSortOptions: GoodsSortOptionsItem[] = [
  {
    label: '人气推荐',
    value: 0
  },
  {
    label: '最新上架',
    value: 1
  },
  {
    label: '价格从低到高',
    value: 2
  },
  {
    label: '价格从高到低',
    value: 3
  }
]

// 这里处理排序逻辑
watch(goodsSortValue, (newValue) => {
  console.log(newValue)
  const SORT_MAP: any = {
    0: () => {
      productList.value = defaultList.value.filter(
        (item: any) => item.price >= priceCurrentMinValue.value && item.price <= priceCurrentMaxValue.value
      )
    },
    1: () => {
      productList.value.sort((pre, cur) => new Date(cur.createdAt!).getTime() - new Date(pre.createdAt!).getTime())
    },
    2: () => {
      productList.value.sort((pre, cur) => pre.price - cur.price)
    },
    3: () => {
      productList.value.sort((pre, cur) => cur.price - pre.price)
    }
  }
  SORT_MAP[newValue]()
})

const productList = ref<GoodsItemType[]>([])
const defaultList = ref<GoodsItemType[]>([])
// 获取商品列表
const getGoodsList = async () => {
  const res: any = await getGoodsListAPI2()
  if (params.id != '0') {
    defaultList.value = res.filter((item: any) => item.category === QUERY_MAP[params.id])
  } else {
    defaultList.value = res
  }
  productList.value = defaultList.value.filter(
    (item: any) => item.price >= priceCurrentMinValue.value && item.price <= priceCurrentMaxValue.value
  )
  console.log(route.query.keyword)
  if (route.query.keyword) {
    productList.value = productList.value.filter((item: any) => item.name.includes(route.query.keyword))
  }
}

onMounted(() => getGoodsList())

// 监听侧边栏筛选
watch(
  isTagsActive,
  (newValue) => {
    if (newValue.inventory) {
      productList.value = defaultList.value.filter(
        (item: any) => item.category == QUERY_MAP[params.id] && item.stock > 0
      )
    } else {
      productList.value = defaultList.value.filter((item: any) => item.category == QUERY_MAP[params.id])
    }
  },
  { deep: true }
)
</script>

<template>
  <!-- Banner -->
  <div
    class="h-140 cursor-pointer"
    @click="$router.push({ path: `/item/${Math.floor(Math.random() * 20 + 1)}` })"
    :style="{
      backgroundImage: `url(${baseURL + imgUrl})`,
      backgroundSize: 'cover',
      backgroundPosition: '0 -20px'
    }"
  ></div>
  <div class="bg-info pt-8 pb-50">
    <div class="w-1280px mx-auto flex gap-10 justify-between">
      <div>
        <h3 class="text-30px pb-8 border-b-gray-3 border-b-1 border-b-solid w-200px">{{ QUERY_MAP[params.id] }}</h3>
        <!-- 导航项目 -->
        <ul>
          <li>
            <div
              @click="isTagsShow.inventory = !isTagsShow.inventory"
              class="flex items-center gap-4 text-lg mt-4 cursor-pointer"
            >
              <span>库存</span>
            </div>

            <ul
              class="my-4 h-14 overflow-hidden transition-all duration-200 border-b-gray-3 border-b-1 border-b-solid"
              :class="{ 'h-0!': !isTagsShow.inventory }"
            >
              <li
                class="px-6 py-3 w-32 text-center border-1 border-solid bg-white border-black cursor-pointer"
                :class="{ 'text-white bg-black!': isTagsActive.inventory }"
                @click="isTagsActive.inventory = !isTagsActive.inventory"
              >
                仅看有货
              </li>
            </ul>
          </li>

          <li>
            <div
              @click="isTagsShow.serve = !isTagsShow.serve"
              class="flex items-center gap-4 text-lg mt-4 cursor-pointer"
            >
              <span>订制服务</span>
            </div>

            <ul
              class="my-4 h-14 overflow-hidden transition-all duration-200 border-b-gray-3 border-b-1 border-b-solid"
              :class="{ 'h-0!': !isTagsShow.serve }"
            >
              <li
                class="px-6 py-3 w-32 text-center border-1 border-solid bg-white border-black cursor-pointer"
                :class="{ 'text-white bg-black!': isTagsActive.serve }"
                @click="isTagsActive.serve = !isTagsActive.serve"
              >
                支持刻字
              </li>
            </ul>
          </li>

          <li>
            <div
              @click="isTagsShow.price = !isTagsShow.price"
              class="flex items-center gap-4 text-lg mt-4 cursor-pointer"
            >
              <span>价格范围</span>
            </div>

            <ul class="my-4 h-22 overflow-hidden transition-all duration-150" :class="{ 'h-0!': !isTagsShow.price }">
              <li class="px-6 py-3 w-full flex flex-col gap-4">
                <div class="text-center text-lg">¥ {{ priceCurrentMinValue }} - {{ priceCurrentMaxValue }} ¥</div>
                <a-slider
                  :default-value="priceRangeValue"
                  @change="handleChangePriceRange"
                  :min="0"
                  :max="700"
                  class="w-full"
                  range
                />
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <div class="flex items-center justify-between pb-8 border-b-gray-3 border-b-1 border-b-solid">
          <div>
            <a-space direction="vertical">
              <a-breadcrumb :routes="routes">
                <template #item-render="{ route, paths }">
                  <router-link :to="{ path: route.path }">{{ route.label }}</router-link>
                </template>
              </a-breadcrumb>
            </a-space>
          </div>
          <div class="w-60 flex items-center gap-4">
            <div>{{ productList.length }}个商品</div>
            <a-select v-model="goodsSortValue" class="flex-1" size="large">
              <a-option v-for="item in goodsSortOptions" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
          </div>
        </div>
        <!-- 商品列表 -->
        <GoodsList :goodsList="productList" class="mt-6" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.arco-slider-bar) {
  background-color: #333;
}

:deep(.arco-slider-btn::after) {
  border-color: #333;
}

/* 搜索框背景白色 */
:deep(.arco-select) {
  background-color: white;
  border-color: #ccc;
}
</style>
